<script setup>
import {orderGetAPI, orderPayAddAPI} from "@/api/FrontApi/order.js";
import {onMounted} from "vue";
import {ref} from "vue";
import {useUserStore} from "@/stores/index.js";
import {useRouter} from "vue-router";
import 'element-plus/theme-chalk/el-message.css'
import {ElMessage} from "element-plus";

const order = ref({})

const getOrder = async () => {
  const res = await orderGetAPI()
  if (res.code === 1) {
    order.value = res.data
  }
}

onMounted(() => getOrder())

// 获取用户名
const userStore = useUserStore()
const currentUsername = ref(userStore.user.username)

// 控制下拉框
const isDropdownShow = ref(false)

// 支付方式
const paymentName = ref('钱包余额支付')
const payment = ref(0)
const changePayment = (type) => {
  switch (type) {
    case 0 :
      payment.value = type
      paymentName.value = "钱包余额支付"
      isDropdownShow.value = false
      break
    case 1 :
      payment.value = type
      paymentName.value = "微信支付"
      isDropdownShow.value = false
      break
    case 2 :
      payment.value = type
      paymentName.value = "支付宝支付"
      isDropdownShow.value = false
      break
    default :
      break
  }
}

const handleDropdownShow = () => {
  isDropdownShow.value = !isDropdownShow.value
}

// 支付订单
const router = useRouter()
const isAgree = ref(false)
const submit = async () => {
  if (isAgree.value === false) {
    ElMessage.warning("请先同意用户协定")
    return
  }
  console.log(order.value)
  const requestBody = {
    orderNumber: order.value.orderNumber,
    payment: payment.value
  }
  const res = await orderPayAddAPI(requestBody)
  if (res.code === 1) {
    router.push('/pay/success')
  }
}
</script>

<template>
  <div class="pay-page">
    <div class="container">
      <div class="left">
        <div class="game-list">
          <div v-for="item in order.games" :key="item" class="item">
            <div class="game-left">
              <div class="simple-picture">
                <img :src="item.simplePicture">
              </div>
              <div class="desc">
                <div class="game-title">{{ item.chineseName }}</div>
                <div v-if="item.receiveUsername !== null" class="to-friend">送给{{ item.receiveUsername }}的礼物</div>
              </div>
            </div>
            <div class="game-right">
              <div class="game-price">￥{{ item.currentPrice }}</div>
            </div>
          </div>
        </div>
        <div class="price-count">
          <div class="small-count">
            <span>小计</span><span>￥{{ order.amount }}</span>
          </div>
          <div class="solid"></div>
          <div class="all-count">
            <span>合计</span><span>￥{{ order.amount }}</span>
          </div>
        </div>
        <div class="payment">
          <div class="payment-choose">
            <div class="desc">支付方式：</div>
            <div class="change-payment">
              <div @click="handleDropdownShow" class="current-payment">
                <span>{{paymentName}}</span><i class="iconfont icon-a-xiala2"></i>
              </div>
              <div v-show="isDropdownShow" class="dropdown-menu">
                <div @click="changePayment(0)">钱包余额支付</div>
              </div>
            </div>
          </div>
          <div class="pay-account">
            <div class="desc">KOKO 账户：</div>
            <div class="username">{{ currentUsername }}</div>
          </div>
          <div class="solid"></div>
          <div class="agree-user-agreement">
            <el-checkbox v-model="isAgree" class="check-box"/>
            <span>我同意《KOKO
              订户协议》中的条款。微信支付的交易经由微信网站授权。点击下方按钮以打开新的网页浏览器并开始交易。</span>
          </div>
          <div class="pay-button">
            <button @click="submit">支付</button>
          </div>
        </div>
      </div>
      <div class="right">
        <div class="notice">
          <span>在 KOKO 上购物</span>
          <span>当您完成此笔交易后，款项会自您的支付方式中扣除，且您将收到一封电子邮件确认您的购买。</span>
          <span>在 KOKO 上购物</span>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.pay-page {
  .container {
    width: 940px;
    display: flex;
    justify-content: space-between;

    .left {
      width: 616px;

      .game-list {
        .item {
          margin: 3px 0;
          padding: 0 15px;
          background: rgba(0, 0, 0, 0.2);
          display: flex;
          justify-content: space-between;

          .game-left {
            display: flex;

            .simple-picture {
              padding: 15px 0;
            }

            .desc {
              margin-left: 15px;
              padding: 15px 0;

              .game-title {
                color: #c6d4df;
              }

              .to-friend {
                color: #626366;
                font-size: 13px;
              }
            }
          }

          .game-right {
            .game-price {
              padding-top: 15px;
              color: #c6d4df;
            }
          }

        }
      }

      .price-count {
        padding: 16px;
        margin-top: 4px;
        background: rgba(0, 0, 0, 0.2);

        .small-count {
          display: flex;
          justify-content: space-between;

          span {
            display: inline-block;
            color: #7092a5;
          }

          span:last-child {
            color: #c6d4df;
          }
        }

        .solid {
          margin: 9px 0px;
          border-top: 1px solid #7092a5;
        }

        .all-count {
          display: flex;
          justify-content: space-between;

          span {
            display: inline-block;
            color: #7092a5;
          }

          span:last-child {
            color: #c6d4df;
          }
        }
      }
      .payment {
        padding: 16px;
        margin-top: 4px;
        background: rgba(0, 0, 0, 0.2);
        .payment-choose {
          display: flex;
          .desc {
            line-height: 28px;
            width: 140px;
            color: #7092a5;
            font-size: 13px;
          }
          .change-payment {
            position: relative;
            .current-payment {
              width: 130px;
              height: 28px;
              text-align: center;
              cursor: pointer;
              font-weight: 300;
              border-radius: 3px;
              background: rgba(59, 63, 72, .5);
              line-height: 26px;
              color: #dfe3e6;
              font-size: 12px;
            }
            .dropdown-menu {
              width: 130px;
              background-color: #3D4450;
              box-shadow: 0 0 2px #000000;
              border-radius: 2px;
              position: absolute;
              color: #dcdedf;
              div {
                padding: 6px 16px;
                font-size: 13px;
                cursor: pointer;
                &:hover {
                  background-color: #dcdedf;
                  color: #3D4450;
                }
              }
            }
            span {
              margin-right: 8px;
            }
          }
        }
        .pay-account {
          margin-top: 10px;
          display: flex;
          .desc {
            width: 140px;
            color: #7092a5;
            font-size: 13px;
          }
          .username {
            color: #c6d4df;
          }
        }
        .solid {
          margin: 9px 0px;
          border-top: 1px solid #7092a5;
        }
        .agree-user-agreement {
          color: #c6d4df;
          .check-box {
            margin-right: 10px;
          }
        }
        .pay-button {
          margin: 50px 0;
          display: flex;
          justify-content: end;
          button {
            padding: 0 40px;
            line-height: 34px;
            background: linear-gradient(to right, #75b022 5%, #588a1b 95%);
            border-radius: 2px;
            border: 0;
            color: #d2efa9;
            font-size: 20px;
            text-align: center;
            cursor: pointer;
            text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.3);
            &:hover {
              color: #fff;
              background: linear-gradient(to right, #96e12d 5%, #75b022 95%);
            }
          }
        }
      }
    }

    .right {
      max-width: 308px;

      .notice {
        margin-top: 3px;
        background: rgba(0, 0, 0, 0.2);

        span {
          padding: 8px 12px;
          display: block;

          &:first-child {
            line-height: 32px;
            font-size: 17px;
            color: #fff;
          }

          &:nth-child(2) {
            font-size: 13px;
            color: #c6d4df;
          }

          &:last-child {
            line-height: 32px;
            font-size: 17px;
            color: #c7d5e0;
          }
        }
      }
    }
  }
}
</style>
